<template lang="html">
  <el-container class="setting-center_mall-shop-setting_shop-initialize">
    <el-main>
      <div class="wrapper-box">
        <div class="dis">
          <div class=" goods-list-image">
            <div class="pos_r">

              <template v-if="settingConfig.styleType === '1'|| settingConfig.styleType === '4'">
                <img class="mo-image" :src="image[settingConfig.styleType][settingConfig.adType === '1'?'main':'active']" alt="">
              </template>
              <template v-if="settingConfig.styleType === '2'">
                <img class="mo-image" :src="image[settingConfig.styleType]['main']" alt="">
              </template>
              <template v-if="settingConfig.styleType === '3'">
                <img class="mo-image" :src="image[settingConfig.styleType][settingConfig.classImage === '2'?'hide':settingConfig.imageSize === '1' ? 'main' : 'active']" alt="">
              </template>

              <div class="pos_a image-box-container">


                <template v-if="settingConfig.styleType === '4' && settingConfig.showGoodsSaleNum === '1'">
                  <div class="pos_a goodsSales2-t goodsSales2-1">已售1.2万件</div>
                  <div class="pos_a goodsSales2-t goodsSales2-2">已售1.2万件</div>
                  <div class="pos_a goodsSales2-t goodsSales2-3">已售1.2万件</div>
                  <div class="pos_a goodsSales2-t goodsSales2-4">已售1.2万件</div>
                </template>

                <template v-if="settingConfig.styleType === '4' &&  settingConfig.showCart === '1'">
                  <img v-for="(item,index) in 4" :key="index" class="pos_a subAdd-2" :class="'cart-2-'+(index+1)" :src="settingConfig.cartType === '1' ? '../../../../assets/micro-page/showCart_1.png' : '../../../../assets/micro-page/showCart_2.png'" alt="">
                </template>

              </div>
            </div>
          </div>
          <div class="flex_1">

            <div class="dis al_item dis_ju_spb select-type">
              <div>页面样式：样式{{ settingConfig.styleType }}</div>
              <el-button type="text" @click="dialogVisible = true">选择样式</el-button>
            </div>

            <div class="goods-set">
              <el-form ref="addMenu" :model="settingConfig" label-width="80px">

                <el-form-item v-if="settingConfig.styleType === '4'" class="person-center-form-item" label="显示元素">
                  <el-checkbox true-label="1" false-label="0" v-model="settingConfig.showGoodsSaleNum">商品销量</el-checkbox>
                </el-form-item>

                <el-form-item v-if="settingConfig.styleType === '1' || settingConfig.styleType === '4'"  class="person-center-form-item" label="广告位">
                  <el-radio v-model="settingConfig.adType" label="1">关闭</el-radio>
                  <el-radio v-model="settingConfig.adType" label="2">开启</el-radio>
                </el-form-item>


                <el-form-item v-if="settingConfig.styleType === '4'" class="person-center-form-item" label="购物车">
                  <el-radio v-model="settingConfig.cartType" label="1">样式1</el-radio>
                  <el-radio v-model="settingConfig.cartType" label="2">样式2</el-radio>
                </el-form-item>

                <el-form-item v-if="settingConfig.styleType === '3'" class="person-center-form-item" label="分类图片">
                  <el-radio v-model="settingConfig.classImage" label="1">显示</el-radio>
                  <el-radio v-model="settingConfig.classImage" label="2">隐藏</el-radio>
                </el-form-item>

                <el-form-item v-if="settingConfig.styleType === '3'" class="person-center-form-item" label="图片尺寸">
                  <el-radio v-model="settingConfig.imageSize" label="1">大</el-radio>
                  <el-radio v-model="settingConfig.imageSize" label="2">小</el-radio>
                </el-form-item>

                <template v-if="settingConfig.styleType === '2'">

                  <div class="dis al_item dis_ju_spb">
                    <el-button :disabled="settingConfig.items.length>=30" @click="settingConfig.items.push(JSON.parse(JSON.stringify(itemTep)));currentShowIndex = settingConfig.items.length-1">添加导航</el-button>
                    <div>最多可添加30个导航，可拖拽排序</div>
                  </div>

                  <div class="panel-items">
                    <draggable :list="settingConfig.items">
                    <div v-for="(item,index) in settingConfig.items" :key="index" class="panel-item">
                      <div class="dis al_item dis_ju_spb panel-header" @click="currentShowIndex = index">
                        <div><i :class="currentShowIndex === index ? 'el-icon-arrow-down': 'el-icon-arrow-up' "></i> 导航{{ index + 1 }}</div>
                        <el-button size="mini" v-if="settingConfig.items.length>=2" type="text" @click="settingConfig.items.splice(index,1)">删除</el-button>
                      </div>
                      <div v-if="index === currentShowIndex" class="panel-container">

                        <el-form-item class="person-center-form-item" label="导航名称">
                          <el-input show-word-limit size="mini" maxlength="10" v-model="item.title"></el-input>
                        </el-form-item>

                        <el-form-item class="person-center-form-item" label="关联内容">
                          <el-radio v-model="item.contentType" label="1">商品分组</el-radio>
                          <el-radio v-model="item.contentType" label="2">商品属性</el-radio>
                          <div><el-button>选择{{item.contentType === '1' ? '分组' : '属性' }}</el-button></div>
                        </el-form-item>

                        <el-form-item class="person-center-form-item" label="顶部广告">
                          <div class="dis al_item">
                            <div class="image-box"
                                 :style="{backgroundImage: `url(${item.topAd.topAdImage ? item.topAd.topAdImage : ''})`}"
                            ></div>
                            <el-button>选择图片</el-button>
                          </div>
                          <div class="color-9797A1">建议尺寸490px*160px</div>
                        </el-form-item>

                        <el-form-item class="person-center-form-item" label="图片链接">
                          <el-radio v-model="item.topAd.imageLink" label="1">系统链接</el-radio>
                          <el-radio v-model="item.topAd.imageLink" label="2">商品属性</el-radio>
                          <div>
                            <el-button v-if="item.topAd.imageLink === '1'">选择链接</el-button>
                          </div>
                          <div style="margin-top:10px" v-if="item.topAd.imageLink === '2'">
                            <el-input size="mini" placeholder="请填写需要跳转的H5链接"
                                      v-model="item.topAd.h5"
                            >
                              <span slot="prepend">H5链接:</span>
                            </el-input>
                            <el-input size="mini" placeholder="请填写小程序AppID"
                                      v-model="item.topAd.appId"
                            >
                              <span slot="prepend">AppID:</span>
                            </el-input>
                            <el-input size="mini" placeholder="请填写小程序页面路径"
                                      v-model="item.topAd.pagePath"
                            >
                              <span slot="prepend">路径:</span>
                            </el-input>
                            <div class="color-9797A1">H5链接将在微信公众号及非微信环境的渠道中生效，AppID小程序仅在微信小程序中生效</div>
                          </div>
                        </el-form-item>

                        <el-form-item class="person-center-form-item" label="底部广告">
                          <div class="dis al_item">
                            <div class="image-box"
                                 :style="{backgroundImage: `url(${item.bottomAd.topAdImage ? item.bottomAd.topAdImage : ''})`}"
                            ></div>
                            <el-button>选择图片</el-button>
                          </div>
                          <div class="color-9797A1">建议尺寸490px*160px</div>
                        </el-form-item>
                        <el-form-item class="person-center-form-item" label="图片链接">
                          <el-radio v-model="item.bottomAd.imageLink" label="1">系统链接</el-radio>
                          <el-radio v-model="item.bottomAd.imageLink" label="2">商品属性</el-radio>
                          <div>
                            <el-button v-if="item.bottomAd.imageLink === '1'">选择链接</el-button>
                          </div>
                          <div style="margin-top:10px" v-if="item.bottomAd.imageLink === '2'">
                            <el-input size="mini" placeholder="请填写需要跳转的H5链接"
                                      v-model="item.bottomAd.h5"
                            >
                              <span slot="prepend">H5链接:</span>
                            </el-input>
                            <el-input size="mini" placeholder="请填写小程序AppID"
                                      v-model="item.bottomAd.appId"
                            >
                              <span slot="prepend">AppID:</span>
                            </el-input>
                            <el-input size="mini" placeholder="请填写小程序页面路径"
                                      v-model="item.bottomAd.pagePath"
                            >
                              <span slot="prepend">路径:</span>
                            </el-input>
                            <div class="color-9797A1">H5链接将在微信公众号及非微信环境的渠道中生效，AppID小程序仅在微信小程序中生效</div>
                          </div>
                        </el-form-item>
                      </div>
                    </div>
                    </draggable>
                  </div>
                </template>

                <el-form-item class="person-center-form-item" label="分享标题">
                  <el-input show-word-limit maxlength="15" v-model="settingConfig.title"></el-input>
                </el-form-item>
                <el-form-item class="person-center-form-item" label="分享描述">
                  <el-input placeholder="来自好友X (昵称) 的推荐" type="textarea" v-model="settingConfig.description"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </el-main>

    <el-dialog
      title="选择样式"
      :visible.sync="dialogVisible"
      width="900px"
    >

      <div class="dis">
        <div v-for="(item,key,index) in image" :key="index" class="image-type-box">
          <img @click="currentChoose = key" :class="{active:key === currentChoose}" :src="item.main" alt="">
          <div style="margin-top: 10px">
            <el-radio v-model="currentChoose" :label="key">样式{{ key }}</el-radio>
            <div style="margin-top: 10px" class="color-9797A1">{{ item.desc }}</div>
          </div>
        </div>
      </div>


      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleSave">确 定</el-button>
  </span>
    </el-dialog>
    <div class="wrapper-save">
      <el-button :loading="isSaving" :disabled="isSaving" size="mini"  type="primary"  @click="save">保存</el-button>
    </div>
  </el-container>
</template>

<script>
import Index from './index'

export default Index
</script>
<style lang="scss">
.el-form .el-form-item {
  &.person-center-form-item {
    margin-bottom: 16px !important;
  }
}

.person-center-form-item {
  font-size: 12px;

  .el-form-item__label, .el-form-item__content, .el-radio__label, .el-button, .el-checkbox .el-checkbox__label {
    font-size: 12px;
  }
}

</style>
<style lang="scss" scoped>
@import "index";
</style>
